<style type="text/less">
    @import "/web/public/public.less";

    #fragment-gov-list {
        width: 1024px;

        .title {
            width: 100%;
            height: 30px;
            background: url("/web/img/text-zfcgryb.png") no-repeat center;
        }

        ul.year-tab {
            color: #ececec;
            letter-spacing: 9px;
            font-weight: bold;
            text-align: center;
            font-size: 0;
            padding-left: 240px;
            margin-top: 80px;

            & > li {
                display: inline-block;
                width: 122px;
                line-height: 50px;
                font-size: 18px;
                background: url("/web/img/zcb-year.png") no-repeat center;
                background-size: 100%;
                letter-spacing: 5px;
                cursor: pointer;

                &.active {
                    background-image: url("/web/img/zcb-year-active.png");
                    color: #d4af82;
                }
            }
        }

        .content-wrap {
            display: none;
            .clearfix;
            padding-bottom: 100px;
            position: relative;

            &.active {
                display: block;
            }

            .left-wrap {
                width: 238px;
                height: 588px;
                position: relative;
                .fl;

                .arrow {
                    display: none;
                    width: 100%;
                    height: 104px;
                    position: absolute;
                    left: 0;
                    border: none;
                    background: url("/web/img/zcb-arrow-1.png") no-repeat center;
                    background-size: 25% 30%;
                    opacity: .5;
                    transform: rotate(180deg);

                    &:hover {
                        opacity: 1;
                    }

                    &.up-arrow {
                        top: -90px;
                    }

                    &.down-arrow {
                        bottom: -90px;
                        transform: rotate(0deg);
                    }
                }

                .left-box {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    position: relative;

                    ul.left-tab-list {
                        width: 100%;
                        color: #d4af82;
                        font-size: 16px;
                        line-height: 54px;
                        text-align: center;
                        position: absolute;
                        top: 0;
                        left: 0;
                        transition: .5s;

                        & > li {
                            border: 1px solid #d4af82;
                            cursor: pointer;

                            & + li {
                                margin-top: 10px;
                            }

                            &.active {
                                background-color: #d4af82;
                                color: #000000;
                            }

                        }
                    }
                }

            }

            .right-wrap {
                width: 786px;
                //height: 991px;
                .fr;
                border: 1px solid #434242;

                .award-list-wrap {
                    display: none;
                    position: relative;

                    &.active {
                        display: block;
                    }

                    ul.award-list {
                        height: 800px;
                        overflow: hidden;
                        padding: 30px 40px;

                        & > li {
                            & + li {
                                margin-top: 30px;
                            }

                            &.personal {
                                img {
                                    width: 80px;
                                    height: 99px;
                                }

                                .intro {
                                    line-height: 24px;
                                }
                            }

                            &.enterprise {
                                img {
                                    width: 80px;
                                    height: 54px;
                                    margin-top: 15px;
                                }

                                .intro {
                                    line-height: 18px;
                                }
                            }

                            .intro-wrap {

                                .name-wrap {
                                    padding: 11px 0;

                                    .name {
                                        font-size: 18px;
                                        color: #d4af82;
                                        font-weight: bold;
                                    }

                                    .position {
                                        font-size: 14px;
                                        color: #dfdfdf;
                                        margin-left: 15px;
                                    }
                                }

                                .intro {
                                    color: #dfdfdf;
                                    font-size: 14px;
                                }
                            }

                            img + .intro-wrap {
                                width: 605px;
                                .fr;
                            }
                        }
                    }
                }

            }
        }

        /* 滚动轨道 */

        .scroll_bar {
            position: absolute;
            top: 0;
            right: 0;
            width: 5px;
            height: 100%;
            background-color: #000000;
        }

        /* 滚动滑块 */

        .scroll_slider {
            position: absolute;
            top: 0;
            left: 0px;
            width: 5px;
            height: 48px;
            background-color: #d4af82;
            border-radius: 2.5px;
            opacity: .7;
        }

        .scroll_slider:hover {
            opacity: 1
        }
    }

</style>
<script src="/web/lib/less.min.js"></script>
<div id="fragment-gov-list">
    <div class="title"></div>
    <#if yearList?? && (yearList?size>0)>
        <ul class="year-tab">
            <#list yearList as year>
                <#if year_index==0>
                    <li class="active">${year.year?c}</li>
                <#else>
                    <li>${year.year?c}</li>
                </#if>

            </#list>
        </ul>
    </#if>

    <#if yearList?? && (yearList?size>0)>
            <#list yearList as year>
                <#if year_index==0>
                <div class="content-wrap active">
                <#else>
                <div class="content-wrap">
                </#if>
                    <#if year.prizeList?? && (year.prizeList?size>0)>
                    <div class="left-wrap">
                        <div class="arrow up-arrow"></div>
                        <div class="arrow down-arrow"></div>
                        <div class="left-box">
                            <ul class="left-tab-list">
                                <#list year.prizeList as prize>
                                    <#if prize_index==0>
                                        <li class="tab active">${prize.prizeName}</li>
                                    <#else>
                                        <li class="tab">${prize.prizeName}</li>
                                    </#if>
                                </#list>
                            </ul>
                        </div>
                    </div>

                    <div class="right-wrap">
                        <#list year.prizeList as prize>
                            <#if prize_index==0>
                                <div class="award-list-wrap active">
                            <#else>
                                <div class="award-list-wrap">
                            </#if>
                                    <div class="scroll_bar">
                                        <div class="scroll_slider"></div>
                                    </div>
                                    <ul class="award-list">
                                    <#if prize.winnerList?? && (prize.winnerList?size>0)>

                                        <#list prize.winnerList as winner>
                                            <#if prize.prizeType==1>
                                                <li class="personal">
                                                <#else>
                                                <li class="enterprise">
                                            </#if>
                                            <#if winner.winnerImg??>
                                                <#if winner.winnerUrl??>
                                                    <#if winner.winnerUrl!="">
                                                        <a href="${winner.winnerUrl}" target="_blank"> <img src="${winner.winnerImg}" alt="${winner.winnerName}"></a>
                                                    <#else>
                                                        <img src="${winner.winnerImg}" alt="${winner.winnerName}">
                                                    </#if>
                                                <#else>
                                                    <img src="${winner.winnerImg}" alt="${winner.winnerName}">
                                                </#if>
                                            </#if>
                                                <div class="intro-wrap">
                                                    <p class="name-wrap">
                                                        <#if winner.winnerUrl??>
                                                            <#if winner.winnerUrl!="">
                                                                <a href="${winner.winnerUrl}" target="_blank">
                                                                    <span class="name">${winner.winnerName!""}</span>
                                                                    <span class="position">${winner.winnerPosition!""}</span>
                                                                </a>
                                                            <#else>
                                                                <span class="name">${winner.winnerName!""}</span>
                                                                <span class="position">${winner.winnerPosition!""}</span>
                                                            </#if>
                                                        <#else>
                                                            <span class="name">${winner.winnerName!""}</span>
                                                            <span class="position">${winner.winnerPosition!""}</span>
                                                        </#if>
                                                    </p>
                                                    <p class="intro">
                                                        <#if winner.winnerUrl??>
                                                            <#if winner.winnerUrl!="">
                                                                <a href="${winner.winnerUrl}" target="_blank">
                                                                    ${winner.winnerIntro!""}
                                                                </a>
                                                            <#else>
                                                                ${winner.winnerIntro!""}
                                                            </#if>
                                                        <#else>
                                                            ${winner.winnerIntro!""}
                                                        </#if>
                                                    </p>
                                                </div>
                                            </li>
                                        </#list>
                                    </#if>
                                    </ul>
                                </div>
                        </#list>
                    </div>
                    </#if>
                </div>
            </#list>
    </#if>

</div>
<script src="/web/lib/scrollBar.js"></script>
<script>
    $(function () {
        var $aYearTabLi = $('#fragment-gov-list ul.year-tab>li');
        var $aLeftTabListLi = $('#fragment-gov-list ul.left-tab-list>li.tab');
        var $aContentWrap = $('#fragment-gov-list .content-wrap');
        var $aAwardListWrap = $('#fragment-gov-list .award-list-wrap');

        $aYearTabLi.click(function () {
            $(this).addClass('active').siblings().removeClass('active');

            $aContentWrap.eq($aYearTabLi.index($(this))).addClass('active').siblings().removeClass('active');

            resetLeftScroll();
            createScrollBar();
        })
        $aLeftTabListLi.click(function () {
            $(this).addClass('active').siblings().removeClass('active');

            $(this).parents('.content-wrap').find($aAwardListWrap).eq($(this).index()).addClass('active').siblings().removeClass('active');
            console.log($aLeftTabListLi.index($(this)))

            createScrollBar();
        })

        function createScrollBar() {
            new CusScrollBar({
                contentSelector: '#fragment-gov-list .content-wrap.active .award-list-wrap.active .award-list', //滚动内容区
                barSelector: '#fragment-gov-list .content-wrap.active .award-list-wrap.active .scroll_bar', //滚动条
                sliderSelector: '#fragment-gov-list  .content-wrap.active .award-list-wrap.active .scroll_slider' //滚动滑块
            });
        }

        function resetLeftScroll() {
            var $oUpArrow = $('#fragment-gov-list .content-wrap.active .left-wrap .up-arrow');
            var $oDownArrow = $('#fragment-gov-list .content-wrap.active .left-wrap .down-arrow');
            var $oLeftTabList = $('#fragment-gov-list .content-wrap.active ul.left-tab-list');
            var $oLeftBox = $('#fragment-gov-list .content-wrap.active .left-box');

            var arrowClickAble = true;
            var scrollDistance = 588;
            if ($oLeftBox.innerHeight() < $oLeftTabList.innerHeight()) {
                if($oLeftTabList.position().top==0){
                    $oUpArrow.css('display', 'none');
                    $oDownArrow.css('display', 'block');
                }
            }
            $oUpArrow.click(function () {
                if (arrowClickAble && ($oLeftTabList.position().top < 0)) {
                    arrowClickAble = false;
                    $oLeftTabList.css('top', $oLeftTabList.position().top + scrollDistance + 'px');

                    $oLeftTabList.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
                        $oDownArrow.css('display', 'block');
                        if ($oLeftTabList.position().top >= 0) {
                            $oUpArrow.css('display', 'none');
                        }

                        arrowClickAble = true;
                    });
                }
            })
            $oDownArrow.click(function () {
                if (arrowClickAble && ($oLeftTabList.innerHeight() - $oLeftBox.innerHeight() + $oLeftTabList.position().top > 0)) {
                    arrowClickAble = false;
                    $oLeftTabList.css('top', $oLeftTabList.position().top - scrollDistance + 'px');

                    $oLeftTabList.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
                        // console.log('transitionend');
                        $oUpArrow.css('display', 'block');
                        if ($oLeftTabList.innerHeight() - $oLeftBox.innerHeight() + $oLeftTabList.position().top < 0) {
                            $oDownArrow.css('display', 'none');
                        }
                        arrowClickAble = true;
                    });
                }
            })
        }
        resetLeftScroll();
        createScrollBar();

    })

</script>
